<template>
  <div class="container">
    <div class="background-image"></div>
    <div class="content">
      <div class="pet-profile">
        <el-form :model="pet" label-width="120px">
          <el-form-item label="宠物名称">
            <el-input v-model="pet.name"></el-input>
          </el-form-item>
          <el-form-item label="宠物种类">
            <el-input v-model="pet.type"></el-input>
          </el-form-item>
          <el-form-item label="喜好">
            <el-input v-model="pet.likes"></el-input>
          </el-form-item>
          <el-form-item label="宠物性别">
            <el-select v-model="pet.gender" placeholder="请选择">
              <el-option label="女宝宝" value="female"></el-option>
              <el-option label="男宝宝" value="male"></el-option>
              <el-option label="不愿透露" value="undisclosed"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="宠物出生日期">
            <el-date-picker v-model="pet.birthdate" type="date" placeholder="选择日期"></el-date-picker>
          </el-form-item>
          <el-form-item label="相处细节">
            <el-input type="textarea" v-model="pet.details"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="savePet">保存</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import jwtDecode from 'jwt-decode';

export default {
  name: 'CreateProfile',
  data() {
    return {
      pet: {
        id: null, // 确保在编辑时能够保存ID
        ownerId: null,
        name: '',
        type: '',
        likes: '',
        gender: '',
        birthdate: '',
        details: ''
      }
    };
  },
  created() {
    const token = localStorage.getItem('token');
    if (token) {
      const decoded = jwtDecode(token);
      this.pet.ownerId = decoded.userId; // 从JWT中获取用户ID
    }
    const petId = this.$route.query.petId;
    if (petId) {
      this.fetchPetDetails(petId);
    }
  },
  methods: {
    fetchPetDetails(petId) {
      axios.get(`/api/pets/${petId}`, {
        headers: {
          'Authorization': `Bearer ${localStorage.getItem('token')}`
        }
      })
      .then(response => {
        this.pet = response.data;
      })
      .catch(error => {
        this.$message.error('获取宠物详情失败');
        console.error("获取宠物详情失败:", error);
      });
    },
    savePet() {
      const url = this.pet.id ? '/api/pets/update' : '/api/pets/add';
      const method = this.pet.id ? 'put' : 'post';
      axios({
        method: method,
        url: url,
        data: this.pet,
        headers: {
          'Authorization': `Bearer ${localStorage.getItem('token')}`
        }
      })
      .then(response => {
        this.$message.success('宠物档案保存成功');
        this.$router.push('/view-profile');
      })
      .catch(error => {
        this.$message.error('保存失败，请重试');
        console.error(error);
      });
    }
  }
};
</script>

<style scoped>
.container {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: #000; /* 备用背景颜色 */
}

.background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('@/assets/background.jpg'); /* 使用相对路径引入图片 */
  background-size: cover;
  background-position: center;
  opacity: 0.8; /* 根据需要调整透明度 */
}

.content {
  position: relative;
  z-index: 1;
  width: 500px; /* 确保内容宽度与容器一致 */
  padding: 20px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  background: rgba(255, 255, 255, 0.9); /* 设置背景颜色和透明度 */
  border-radius: 8px; /* 设置圆角 */
}

.pet-profile {
  width: 100%;
}
</style>
